<!--
 * @Author: wangshuguang
 * @Date: 2022-02-16 14:23:49
 * @LastEditTime: 2022-03-18 12:50:12
 * @LastEditors: wangshuguang
 * @Description: 流量预警
-->
<template>
  <el-card class="common-container">
    <div class="leftLine mg-b-20">
      代理流量余额预警
      <el-button type="primary" size="small" class="mg-l-20" @click="editAgt">修改配置</el-button>
    </div>
    <el-table size="medium" :data="agentFlowAlerts" border>
      <el-table-column label="序号" width="50" prop="id">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="agentTypeZh" align="center" label="角色" />
      <el-table-column prop="name1" align="center" label="预警基准参数">
        <template slot-scope="scope">
          <span>流量余额</span>
        </template>
      </el-table-column>
      <el-table-column prop="name2" align="center" label="预警条件">
        <template slot-scope="scope">
          <span>&lt;{{ scope.row.flowBalance }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="notice" align="center" label="预警通知内容" />
    </el-table>
    <div class="leftLine mg-b-20 mg-t-20">
      商户流量余额、套餐预警
      <el-button type="primary" size="small" class="mg-l-20" @click="editMerc">修改配置</el-button>
    </div>
    <el-table size="medium" :data="merchantFlowAlerts" border>
      <el-table-column label="序号" width="50" prop="id">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="username" align="center" label="角色">
        <template slot-scope="scope"><span>商户</span></template>
      </el-table-column>
      <el-table-column prop="alertParamZh" align="center" label="预警基准参数" />
      <el-table-column prop="name" align="center" label="预警条件">
        <template slot-scope="scope">
          <span>&lt;{{ scope.row.alertParam == 2 ? scope.row.alertConditions : '套餐月租' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="notice" align="center" label="预警通知内容" />
    </el-table>

    <el-drawer
      :title="infoConfig.title"
      :visible.sync="infoVisible"
      size="50%"
      direction="rtl"
    >
      <flowWarningAgt v-if="infoConfig.type == 'editAgt' && infoVisible" :info-config="infoConfig" @close="infoVisible = false" @sucClose="sucClose" />
      <flowWarningMerc v-else-if="infoConfig.type == 'editMerc' && infoVisible" :info-config="infoConfig" @close="infoVisible = false" @sucClose="sucClose" />
    </el-drawer>
  </el-card>
</template>

<script>
import { flowAlertList } from '@/api/flowConf'
import flowWarningAgt from './components/flowWarningAgt.vue'
import flowWarningMerc from './components/flowWarningMerc.vue'

export default {
  components: { flowWarningAgt, flowWarningMerc },
  data() {
    return {
      infoVisible: false,
      infoConfig: {
        title: '',
        data: {}
      },
      form: {},
      scope: 0,
      total: 0,
      statusOptions: ['停用', '正常'],
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        name: undefined
      },
      agentFlowAlerts: [],
      merchantFlowAlerts: []
    }
  },

  mounted() {
    this.fetchData()
  },
  methods: {
    sucClose() {
      this.infoVisible = false
      this.fetchData()
    },
    editAgt(data) {
      this.infoConfig = {
        type: 'editAgt',
        title: '代理流量余额预警配置',
        data: this.agentFlowAlerts
      }
      this.infoVisible = true
    },
    editMerc(data) {
      this.infoConfig = {
        type: 'editMerc',
        title: '商户流量余额、流量套餐预警配置',
        data: this.merchantFlowAlerts
      }
      this.infoVisible = true
    },
    fetchData() {
      flowAlertList(this.listQuery).then(res => {
        if (res.code === 0) {
          this.merchantFlowAlerts = res.data.merchantFlowAlerts
          this.agentFlowAlerts = res.data.agentFlowAlerts
        }
      })
    },
    toRolesName(roles) {
      const rolesNames = []
      for (let i = 0; i < roles.length; i++) {
        rolesNames.push(roles[i].name)
      }
      return rolesNames.join(',')
    },
    handleEdit(user) {
      this.$refs.userDialog.openEdit(user.id).then(() => {
        this.fetchData()
      })
    },

    handleFilter() {
      this.fetchData()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.fetchData()
    },
    handleResetPassword(user) {
      this.$refs.resetPw.open(user.id)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.search-container {
	margin-top: 20px;
	margin-bottom: 20px;
}

.search-wrap {
	width: 300px;
	margin-right: 10px;
}
.el-button--primary:hover,
.el-button--primary:focus {
	background-color: $btnBgc;
	border-color: $btnBgc;
}
</style>
